<template>
    <div>
        <Echart
            id="MonthArticles"
            :options="options"
            height="398px"
            width="100%"
        />
    </div>
</template>

<script>
import * as echarts from 'echarts'
import Echart from '@/echart/common/index.vue'

export default {
    components: {
        Echart
    },
    props: {
        cdata: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            options: {}
        }
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options = {
                    tooltip: {
                        trigger: 'axis',
                        position: function(pt) {
                            return [pt[0], '10%']
                        }
                    },
                    title: {
                        left: 'center',
                        text: '月新增文章数'
                    },
                    grid: {
                        height: '75%',
                        left: '40',
                        right: '40'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: newData.xData
                    },
                    legend: {
                        data: ['新增文章'],
                        top: '30'
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [
                        {
                            name: '新增文章',
                            type: 'line',
                            smooth: true,
                            sampling: 'average',
                            itemStyle: {
                                color: '#f80'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(255,136,0,0.39)'
                                        },
                                        {
                                            offset: 0.34,
                                            color: 'rgba(255,180,0,0.25)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255,222,0,0.00)'
                                        }
                                    ]
                                )
                            },
                            data: newData.sData
                        }
                    ]
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
